<template>
	<view>
		<BindMobile>
			<view>
				<view class="income-wrapper">
					<view class="income-box">
						<view class="income-item">
							<text class="title">累计收益</text>
							<view class="value-row">
								<text class="prefix">¥</text>
								<text class="value">{{ incomeData.totalIncome }}</text>
							</view>
						</view>
					</view>
					<view class="income-box">
						<view class="income-item">
							<text class="title">已提现</text>
							<view class="value-row">
								<text class="prefix">¥</text>
								<text class="value">{{ incomeData.totalIncome }}</text>
							</view>
						</view>
					</view>
					<view class="income-box">
						<view class="income-item">
							<text class="title">待提现</text>
							<view class="value-row">
								<text class="prefix">¥</text>
								<text class="value">{{ incomeData.totalIncome }}</text>
							</view>
						</view>
					</view>
				</view>

				<up-cell-group>
					<up-cell icon="order" title="收益记录" isLink @click="navTo('/pages/income/income')"></up-cell>
					<up-cell icon="rmb-circle" title="提现记录" isLink @click="navTo('/pages/withdraw/withdraw')"></up-cell>
				</up-cell-group>
			</view>
		</BindMobile>

	</view>
</template>

<script setup>
	const incomeData = ref({
		totalIncome: 298653
	})
	
	function navTo(url) {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	.income-wrapper {
		display: flex;
		padding: 16px 11px;
		gutter: 10px;
	}

	.income-box {
		flex: 1;
		margin: 0 5px;
		border-radius: 4px;
		padding: 16px 0;
		background-color: #f5f5f5;
	}

	.income-item {
		display: flex;
		flex-direction: column;
		color: #5B82F7;
		text-align: center;

		.title {
			margin-bottom: 4px;
			font-size: 12px;
			color: #666;
		}

		.value-row {
			.prefix {
				font-size: 12px;
			}
		}

		.value {
			font-weight: bold;
			font-size: 18px;
		}
	}
</style>